//1. 引入 gulp
const gulp = require('gulp');
//引入 babel 的插件包
const babel = require('gulp-babel');
//引入 browserify 打包插件
const browserify = require('gulp-browserify');
const rename = require('gulp-rename');
//引入 uglify 插件
const uglify = require('gulp-uglify');
//引入 less 相关的插件
const less = require('gulp-less');
const LessAutoprefix = require('less-plugin-autoprefix');
//实例化                                目标浏览器的设置
const autoprefix = new LessAutoprefix({ browsers: ['last 20 versions'] });
//引入 合并 css 插件
const concat = require('gulp-concat');
//引入 压缩 css 插件
const cssmin = require('gulp-cssmin');
//引入压缩 html 插件
const htmlmin = require('gulp-htmlmin');
//引入包
const livereload = require('gulp-livereload');
const connect = require('gulp-connect');
const opn = require('opn');

//2. 创建任务
gulp.task('hello', async () => {
  console.log('Hello Gulp');
});

//创建 babel 转化任务
gulp.task('babel', () => {
  return gulp.src('./src/js/*.js') // 读取源文件内容   *
    .pipe(babel({ //进行语法转换    pipe 管道  createReadStream   .pipe() createWriteStream
      presets: ['@babel/env']
    })).pipe(gulp.dest('build/js')).pipe(livereload());//输出到指定目录  destination 目的地
});

//创建任务
gulp.task('browserify', function () {
  return gulp.src('./build/js/app.js')  //入口文件
    .pipe(browserify())					//将CommonJs语法转换为浏览器能识别的语法
    .pipe(rename('bundle.js'))			//为了防止冲突将文件重命名
    .pipe(gulp.dest('build/js')).pipe(livereload());		//输出到指定位置
});

//创建压缩任务  uglify  丑陋的
gulp.task('uglify', function () {
  return gulp.src('build/js/bundle.js')
    .pipe(uglify())  //压缩js
    .pipe(rename('dist.min.js'))
    .pipe(gulp.dest('dist/js')).pipe(livereload());  //dist distribute 发布 发行
});

//串行
gulp.task('js', gulp.series('babel', 'browserify', 'uglify'));

//less 处理
gulp.task('less', function () {
  return gulp.src('./src/less/*.less')
    .pipe(less({
      plugins: [autoprefix]//自动扩展前缀
    }))
    .pipe(gulp.dest('./build/css')).pipe(livereload());
});

//合并 css
gulp.task('concat', function () {
  return gulp.src('./build/css/*.css')
    .pipe(concat('built.css'))
    .pipe(gulp.dest('./build/css/concat')).pipe(livereload());
});

//
gulp.task('cssmin', function () {
  return gulp.src('build/css/concat/built.css')
    .pipe(cssmin())
    .pipe(rename('dist.min.css'))
    .pipe(gulp.dest('dist/css')).pipe(livereload());
});

gulp.task('css', gulp.series('less', 'concat', 'cssmin'));

//压缩html
gulp.task('htmlmin', () => {
  return gulp.src('src/index.html')
    .pipe(htmlmin({
      collapseWhitespace: true,//去除空格
      removeComments: true //去除注释
    }))
    .pipe(gulp.dest('dist')).pipe(livereload());
});


//1. 在所有可能要执行任务后面加上 .pipe(livereload());     watch 监控
gulp.task('watch', function () {
  //2. 启动热加载服务
  livereload.listen();
  //3. 通过自己服务器打开项目，自动刷新
  connect.server({
    root: 'dist',  // root 根   设置网站的根目录
    port: 3000,
    livereload: true
  });
  //4. 自动打开浏览器
  opn('http://localhost:3000/index.html');
  //5. 监视指定文件（第一个参数），一旦文件发生变化，就自动执行后面的任务（第二个参数）
  gulp.watch('src/less/*.less', gulp.series(['less', 'concat', 'cssmin']));
  gulp.watch('./src/js/*.js', gulp.series(['babel', 'browserify', 'uglify']));
  gulp.watch('./src/index.html', gulp.series('htmlmin'));
});